<template>
    <div>
        <div class="card" v-for="(item, index) in data" :key="index">
            <h2>{{ item.title }}</h2>
            <div :class="['chart-box', item.dom]"></div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, watchEffect} from 'vue'
import { addChart } from "@/common/echartsInit.js"

const props = defineProps({
    data: {
        type: [Object, Array],
        default: () => [
            {
                title: '标题',
                dom: 'dom',
                options: () => { }
            },
            {
                title: '标题',
                dom: 'dom',
                options: () => { }
            }, {
                title: '标题',
                dom: 'dom',
                options: () => { }
            }
        ]
    }
})

watchEffect(() => {
    nextTick(() => {
        for (let index = 0; index < props.data.length; index++) {
            const dom = document.querySelector('.'+props.data[index].dom)
            addChart(dom, props.data[index].options)
        }
    })
})


</script>
<style scoped lang="scss">
.card {
    height: 300px;
    color: #fff;
    border: 1px solid #144567;
    background: url("@/assets/image/line(1).png");
    margin-top: 10px;

    &:nth-child(2) {
        margin: 20px 0;
    }

    h2 {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: 500;
        font-size: 20px;
    }

    .chart-box {
        height: calc(100% - 40px);
    }
}
</style>